<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { FormInstance, FormRules } from 'element-plus'
import { reqAreaTreeSelect } from '@/api/system/user'
import FarmFrom from "@/views/credit/peasants/pea-message/components/farmFrom.vue";
import CropFrom from "@/views/credit/peasants/pea-message/components/cropFrom.vue";

const hzFamFaZhanFromRef = ref<FormInstance>()
const farmProsRef = ref<FormInstance>()
const cropProsRef = ref<FormInstance>()

let props = defineProps(['peaFrom'])
let $emit = defineEmits(['update:peaFrom'])

// 地域樹
const areaOptions = ref()
const regionParams = ref({
  label: 'label', //这里可以配置你们后端返回的属性
  value: 'id',
  children: 'children',
  checkStrictly: true,
})

onMounted(async () => {
  // 获取地域树信息
  await reqAreaTreeSelect().then((req) => {
    areaOptions.value = req.data
  })
})
const rules = reactive<FormRules>({
  mainYeWuYear: [{ required: true, message: '请选择', trigger: 'blur' }],
  mainYeWuXiaQu: [{ required: true, message: '请选择主项目经营辖区', trigger: 'blur' }],
  mainXiangMuAddress: [{ required: true, message: '请输入主要项目经营地址', trigger: 'blur' }],
  mainChanYe: [{ required: true, message: '请选择家庭主产业（多选）', trigger: 'blur' }],
  hasZaiHai: [{ required: true, message: '请选择', trigger: 'blur' }],
  laoDongJiNeng: [{ required: true, message: '请选择劳动技能', trigger: 'blur' }],
  famWuGongIncome: [{ required: true, message: '请输入家庭务工收入（元）', trigger: 'blur' }],
  famOtherIncome: [{ required: true, message: '请输入家庭其他收入（元）', trigger: 'blur' }],
  shengChanExpend: [{ required: true, message: '请输入生产支出/年（元）', trigger: 'blur' }],
  lifeExpend: [{ required: true, message: '请输入家庭生活支出/年(元)', trigger: 'blur' }],
  hasLoans: [{ required: true, message: '请选择', trigger: 'blur' }],
  loansMoney: [{ required: true, message: '请输入意向贷款金额（元）', trigger: 'blur' }],
})

// 进行表单校验
const submitHzFamInForm = async () => {
  // 创建一个 Promise 对象
  return new Promise(async (resolve, reject) => {
    await hzFamFaZhanFromRef.value.validate(async (valid, fields) => {
      // 对那两个数据额校验
      await farmProsRef.value
        .subFarm()
        .then((result) => {
          // 当表单验证通过时，执行这里的逻辑
        })
        .catch((error) => {
          // 当表单验证失败时，执行这里的逻辑
          reject(error)
        })
      await cropProsRef.value
        .subCrop()
        .then((result) => {
          // 当表单验证通过时，执行这里的逻辑
        })
        .catch((error) => {
          // 当表单验证失败时，执行这里的逻辑
          reject(error)
        })

      // 进行
      if (!hzFamFaZhanFromRef) reject('表单还有未填写字段，请填写！')
      if (valid) {
        resolve(true)
      } else {
        console.log('error submit!', fields)
        reject('表单还有未填写字段，请填写！')
      }
    })
  })
}


const removeFrom = () => {
  farmProsRef.value.removeAll()
  cropProsRef.value.removeAll()
}
defineExpose({
  submitHzFamInForm,
  removeFrom
})
</script>

<template>
  <el-form
    ref="hzFamFaZhanFromRef"
    :model="peaFrom"
    label-width="110px"
    label-position="top"
    :rules="rules"
  >
    <el-divider>①</el-divider>
    <el-row :gutter="24">
      <el-col :span="12">
        <el-form-item label="主营业务经营年限" prop="mainYeWuYear">
          <el-select
            v-model="peaFrom.mainYeWuYear"
            placeholder="请输入主营业务经营年限"
            clearable
            :style="{ width: '100%' }"
          >
            <el-option
              v-for="(item, index) in dict.type.main_pro_years"
              :key="index"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="12">
        <el-form-item label="主项目经营辖区" prop="mainYeWuXiaQu">
          <el-cascader
            v-model="peaFrom.mainYeWuXiaQu"
            :options="areaOptions"
            :style="{ width: '100%' }"
            placeholder="请选择主项目经营辖区"
            :props="regionParams"
            clearable
          >
            <template #default="{ node, data }">
              <span>{{ data.label }}</span>
              <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
            </template>
          </el-cascader>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="主要项目经营地址" prop="mainXiangMuAddress">
          <el-input
            v-model="peaFrom.mainXiangMuAddress"
            placeholder="请输入主要项目经营地址"
            clearable
            maxlength="50"
            show-word-limit
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="24">
        <el-form-item label="家庭主产业（多选）" prop="mainChanYe">
          <el-checkbox-group v-model="peaFrom.mainChanYe">
            <el-checkbox
              v-for="(item, index) in dict.type.fam_main_pro"
              :key="item.value"
              :label="item.value"
              :disabled="item.disabled"
            >{{ item.label }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-col>
    </el-row>

    <el-divider>②</el-divider>
    <el-row :gutter="24">
      <el-col :span="12">
        <el-form-item label="近三年来生产是否受灾" prop="hasZaiHai">
          <el-radio-group v-model="peaFrom.hasZaiHai" size="medium">
            <el-radio
              v-for="(item, index) in dict.type.pea_yes_no"
              :key="index"
              :label="item.value"
              :disabled="item.disabled"
            >{{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="劳动技能" prop="laoDongJiNeng">
          <el-select
            v-model="peaFrom.laoDongJiNeng"
            placeholder="请选择劳动技能"
            clearable
            :style="{ width: '100%' }"
          >
            <el-option
              v-for="(item, index) in dict.type.pea_labor_skill"
              :key="index"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>

    <el-divider>③</el-divider>
    <farmFrom ref="farmProsRef" v-model:farming="peaFrom.farming" :hzId="peaFrom.hzId"></farmFrom>
    <el-divider>④</el-divider>
    <cropFrom ref="cropProsRef" v-model:croping="peaFrom.croping" :hzId="peaFrom.hzId"></cropFrom>

    <el-divider>④</el-divider>
    <el-row :gutter="24">
      <el-col :span="12">
        <el-form-item label="家庭务工收入（元）" prop="famWuGongIncome">
          <el-input
            v-model="peaFrom.famWuGongIncome"
            placeholder="请输入家庭务工收入（元）"
            clearable
            show-word-limit
            maxlength="10"
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="家庭其他收入（元）" prop="famOtherIncome">
          <el-input
            v-model="peaFrom.famOtherIncome"
            placeholder="请输入家庭其他收入（元）"
            clearable
            show-word-limit
            maxlength="10"
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-divider>⑤</el-divider>
    <el-row :gutter="24">
      <el-col :span="12">
        <el-form-item label="生产支出/年（元）" prop="shengChanExpend">
          <el-input
            v-model="peaFrom.shengChanExpend"
            placeholder="请输入生产支出/年（元）"
            clearable
            show-word-limit
            maxlength="10"
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="家庭生活支出/年(元)" prop="lifeExpend">
          <el-input
            v-model="peaFrom.lifeExpend"
            placeholder="请输入家庭生活支出/年(元)"
            clearable
            show-word-limit
            maxlength="10"
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-divider>⑥</el-divider>
    <el-row :gutter="24">
      <el-col :span="12">
        <el-form-item label="是否有金额贷款意向" prop="hasLoans">
          <el-radio-group v-model="peaFrom.hasLoans">
            <el-radio
              v-for="(item, index) in dict.type.pea_yes_no"
              :key="index"
              :label="item.value"
              :disabled="item.disabled"
            >{{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="意向贷款金额（元）" prop="loansMoney">
          <el-input
            v-model="peaFrom.loansMoney"
            placeholder="请输入意向贷款金额（元）"
            clearable
            maxlength="10"
            show-word-limit
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script lang="ts">
export default {
  name: 'hzFamFaZhanFrom',
  dicts: [
    'labor_status',
    'main_pro_years',
    'fam_main_pro',
    'pea_labor_skill',
    'pea_farm_pro',
    'pea_crop_pro',
    'pea_yes_no',
  ],
}
</script>

<style scoped lang="scss"></style>
